<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Mosaddek">
  <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
  <link rel="icon" href="../img/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon" />

  <title>组织架构</title>

  <!-- Bootstrap core CSS -->
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <link href="../css/bootstrap-reset.css" rel="stylesheet">
  <!--external css-->
  <link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
  <link href="../assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen" />
  <link rel="stylesheet" href="../css/owl.carousel.css" type="text/css">
  <!-- Custom styles for this template -->
  <link href="../css/style.css" rel="stylesheet">
  <link href="../css/style-responsive.css" rel="stylesheet" />

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
  <!--[if lt IE 9]>
      <script src="../js/html5shiv.js"></script>
      <script src="../js/respond.min.js"></script>
    <![endif]-->

  <!-- 表格组件 -->
  <link rel="stylesheet" type="text/css" href="../assets/table/dependents/fontAwesome/css/font-awesome.min.css" media="all"
  />
  <link rel="stylesheet" type="text/css" href="../assets/table/dlshouwen.grid.css" />
  <link rel="stylesheet" type="text/css" href="../assets/table/dependents/datePicker/skin/WdatePicker.css" />
  <link rel="stylesheet" type="text/css" href="../assets/table/dependents/datePicker/skin/default/datepicker.css" />

  <!-- 流程图绘制组件 -->
  <link rel="stylesheet" type="text/css" href="../assets/joint/joint.css" />

  <!-- 当前页面CSS -->
  <link href="../css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <section id="container" class="">
    <!--header start-->
    <header class="header white-bg">
      <div class="sidebar-toggle-box">
        <div data-placement="right" class="icon-reorder tooltips"></div>
      </div>
      <!--logo start-->
      <a href="#" class="logo">
        <span>Certus</span>Net
      </a>
      <!--logo end-->
      <div class="nav notify-row" id="top_menu">
        <!--  notification start -->
        <ul class="nav top-menu">
          <!-- settings start -->
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <i class="icon-tasks"></i>
              <span class="badge bg-success">7</span>
            </a>
            <ul class="dropdown-menu extended tasks-bar">
              <div class="notify-arrow notify-arrow-green"></div>
              <a class="icon-more" href="../system/notice.html">查看更多</a>
              <li>
                <p class="green">项目动态</p>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，投标成功，项目负责人李四。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，立项成功，项目负责人张三。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，回款成功，项目负责人王五。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，签约成功，项目负责人陈七。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">XXX项目，招标成功，项目负责人吴晓晓。</div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <!-- settings end -->
          <!-- inbox dropdown start-->
          <li id="header_inbox_bar" class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <i class="icon-envelope-alt"></i>
              <span class="badge bg-important">8</span>
            </a>
            <ul class="dropdown-menu extended inbox">
              <div class="notify-arrow notify-arrow-red"></div>
              <a class="icon-more" href="../system/notice.html">查看更多</a>
              <li>
                <p class="red">通知消息</p>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ920392立项申请，审批通过，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ92222投标申请，审核通过，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ926754招标申请，已同意，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ920243线索申请，审批未通过，请及时处理。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">编号NJ920255商务预测，已同意，请及时处理。</div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <!-- inbox dropdown end -->
          <!-- notification dropdown start-->
          <li id="header_notification_bar" class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <i class="icon-bell-alt"></i>
              <span class="badge bg-warning">9</span>
            </a>
            <ul class="dropdown-menu extended notification">
              <div class="notify-arrow notify-arrow-yellow"></div>
              <a class="icon-more" href="../system/notice.html">查看更多</a>
              <li>
                <p class="yellow">系统公告</p>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">公司内部岗位招聘，有意者请联系相关岗位招聘人员。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">因暴雨天气影响，06月02日全体公司人员放假一天。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">IMS v1.0系统上线，希望各位积极踊跃反馈建议。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">系统更新，新增行政中心板块-新增用章申请。</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="task-info">
                    <div class="desc">系统维护，维护时间：2018年06月01日20:00-2018年06月06日17:00</div>
                  </div>
                </a>
              </li>
            </ul>
          </li>
          <!-- notification dropdown end -->
        </ul>
        <!--  notification end -->
      </div>
      <div class="top-nav ">
        <!--search & user info start-->
        <ul class="nav pull-right top-menu">
          <!-- user login dropdown start-->
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <span class="username">用户名</span>
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu extended logout">
              <div class="log-arrow-up"></div>
              <li>
                <a href="../../office/edit/edit-user-1.html">
                  个人中心
                </a>
              </li>
              <li>
                <a href="#">
                  账户设置
                </a>
              </li>
              <li>
                <a href="../login.html">
                  退出登录
                </a>
              </li>
            </ul>
          </li>
          <!-- user login dropdown end -->
        </ul>
        <!--search & user info end-->
      </div>
    </header>
    <!--header end-->
    <!--sidebar start-->
    <aside>
      <div id="sidebar" class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu">
          <li>
            <a class="" href="../index.html">
              <i class="icon-windows"></i>
              <span>信息中心</span>
            </a>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-book"></i>
              <span>我的项目</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../project/project.html">项目管理</a>
              </li>
              <li>
                <a class="" href="../project/customer.html">客户管理</a>
              </li>
              <li>
                <a class="" href="../project/demand.html">需求管理</a>
              </li>
              <li>
                <a class="" href="../project/problem.html">问题管理</a>
              </li>
              <li>
                <a class="" href="../project/quality.html">质量管理</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-exchange"></i>
              <span>我的流程</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../do/initiate.html">我的发起</a>
              </li>
              <li>
                <a class="" href="../do/do.html">待办事项</a>
              </li>
              <li>
                <a class="" href="../do/tdo.html">已办事项</a>
              </li>
              <li>
                <a class="" href="../do/meeting.html">会议预定</a>
              </li>
              <li>
                <a class="" href="../do/oabt.html">出差申请</a>
              </li>
              <li>
                <a class="" href="../do/afr.html">报销申请</a>
              </li>
              <li>
                <a class="" href="../do/proc.html">采购申请</a>
              </li>
              <li>
                <a class="" href="../do/holiday.html">请假调休</a>
              </li>
              <li>
                <a class="" href="../do/overtime.html">加班申请</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="../okr/okr.html" class="">
              <i class="icon-calendar"></i>
              <span>OKR管理</span>
            </a>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-folder-close"></i>
              <span>文档管理 </span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../doct/doct-yf.html">研发类文档</a>
              </li>
              <li>
                <a class="" href="../doct/doct-sc.html">市场类文档</a>
              </li>
              <li>
                <a class="" href="../doct/doct-qt.html">行政/其他类</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-bar-chart"></i>
              <span>运营管理 </span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../opmt/bi.html">数据图表</a>
              </li>
              <li>
                <a class="" href="../opmt/focus.html">关注管理</a>
              </li>
              <li>
                <a class="" href="../opmt/data.html">项目数据</a>
              </li>
              <li>
                <a class="" href="../opmt/income.html">收入回款</a>
              </li>
              <li>
                <a class="" href="../opmt/cost.html">项目费用</a>
              </li>
              <li>
                <a class="" href="../opmt/human.html">人力投入</a>
              </li>
              <li>
                <a class="" href="../opmt/htgl.html">合同管理</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-suitcase"></i>
              <span>行政中心</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../adms/work.html">工作安排</a>
              </li>
              <li>
                <a class="" href="../adms/time.html">定时提醒</a>
              </li>
              <li>
                <a class="" href="../adms/certificate.html">证书使用</a>
              </li>
              <li>
                <a class="" href="../adms/offseal.html">公章使用</a>
              </li>
              <li>
                <a class="" href="../adms/assets.html">资产管理</a>
              </li>
              <li>
                <a class="" href="../adms/proc.html">个人资产</a>
              </li>
              <li>
                <a class="" href="../adms/docking.html">办公对接</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu active">
            <a href="javascript:;" class="">
              <i class="icon-group"></i>
              <span>人事中心</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li class="active">
                <a class="" href="../office/org.html">组织架构</a>
              </li>
              <li>
                <a class="" href="../office/users.html">员工管理</a>
              </li>
              <li>
                <a class="" href="../office/attd.html">考勤管理</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a href="javascript:;" class="">
              <i class="icon-paste"></i>
              <span>规章制度</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../rules/wdgl.html">总则</a>
              </li>
              <li>
                <a class="" href="../rules/gsbm.html">公司管理制度</a>
              </li>
              <li>
                <a class="" href="../rules/rygl.html">各部门管理制度</a>
              </li>
            </ul>
          </li>
          <li>
            <a class="" href="../efficiency/improve.html">
              <i class="icon-rocket"></i>
              <span>效率提升</span>
            </a>
          </li>
          <li>
            <a class="" href="../school/learning.html">
              <i class="icon-globe"></i>
              <span>网上学堂</span>
            </a>
          </li>
          <li class="sub-menu">
            <a class="" href="javascript:;">
              <i class="icon-cogs"></i>
              <span>系统管理</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../system/notice.html">系统公告</a>
              </li>
              <li>
                <a class="" href="../system/help.html">帮助文档</a>
              </li>
            </ul>
          </li>
          <li class="sub-menu">
            <a class="" href="javascript:;">
              <i class="icon-edit"></i>
              <span>建议反馈</span>
              <span class="arrow"></span>
            </a>
            <ul class="sub">
              <li>
                <a class="" href="../advice/feedback.html">在线反馈</a>
              </li>
              <li>
                <a class="" href="../advice/tqus.html">问卷调查</a>
              </li>
            </ul>
          </li>
          <li>
            <a class="" href="javascript:;">
              <i class="icon-comments"></i>
              <span>企业论坛</span>
            </a>
          </li>
        </ul>
        <!-- sidebar menu end-->
      </div>
    </aside>
    <!--sidebar end-->
    <!--main content start-->
    <section id="main-content">
      <section class="wrapper">
        <!--state overview end-->
        <div class="row">
          <div class="col-lg-12">
            <section class="panel">
              <header class="panel-heading">
                组织架构展示图
              </header>
              <div class="panel-body">
                <div id="paper" class="paper box-center"></div>
              </div>
            </section>
            <section class="panel">
              <header class="panel-heading">
                组织架构图
              </header>
              <div class="panel-body">
                <div class="litree-box" id="litree">
                  <ul class="level-1">
                    <li class="tag dep-tag" id="tag-1">
                      股东大会
                    </li>
                  </ul>
                  <ul class="level-2">
                    <li class="tag dep-tag" id="tag-2">
                      董事会/董事长
                    </li>
                  </ul>
                  <ul class="level-3">
                    <li class="tag ple-tag" id="tag-3">董事会秘书</li>
                    <li class="tag dep-tag" id="tag-4">浩方信息</li>
                    <li class="tag dep-tag" id="tag-5">浩方信息</li>
                    <li class="tag dep-tag" id="tag-6">美国赛特斯</li>
                  </ul>
                  <ul class="level-4">
                    <li class="tag ple-tag" id="tag-7">总经理</li>
                  </ul>
                  <ul class="level-5">
                    <li class="tag dep-tag" id="tag-8">总经办</li>
                  </ul>
                  <ul class="level-6">
                    <li class="tag ple-tag" id="tag-9">首席运营官</li>
                    <li class="tag ple-tag" id="tag-10">董事长助理兼执行副总裁</li>
                  </ul>
                  <ul class="level-7">
                    <li class="tag ple-tag" id="tag-11">副总经理</li>
                  </ul>
                  <ul class="level-8">
                    <li class="tag ple-tag" id="tag-12">产品管理部总经理</li>
                    <li class="tag ple-tag" id="tag-13">销售部总经理</li>
                    <li class="tag ple-tag" id="tag-14">人力行政高级总监</li>
                  </ul>
                  <ul class="level-9">
                    <li class="tag dep-tag" id="tag-15">柔性融合运维平台研发部</li>
                    <li class="tag dep-tag" id="tag-16">柔性基础网络研发部</li>
                    <li class="tag dep-tag" id="tag-17">柔性云及大数据研发部</li>
                    <li class="tag dep-tag" id="tag-18">柔性边缘计算研发部</li>
                    <li class="tag dep-tag" id="tag-19">运营管理部</li>
                    <li class="tag dep-tag" id="tag-20">先进技术及产品研究院</li>
                    <li class="tag dep-tag" id="tag-21">市场部</li>
                    <li class="tag dep-tag" id="tag-22">信息系统集成部</li>
                    <li class="tag dep-tag" id="tag-23">产品管理部</li>
                    <li class="tag dep-tag" id="tag-24">运营商销售部</li>
                    <li class="tag dep-tag" id="tag-25">广电销售部</li>
                    <li class="tag dep-tag" id="tag-26">政企销售部</li>
                    <li class="tag dep-tag" id="tag-27">IT信息中心</li>
                    <li class="tag dep-tag" id="tag-28">政府事务部</li>
                    <li class="tag dep-tag" id="tag-29">综合事务管理部</li>
                    <li class="tag dep-tag" id="tag-30">人力资源部</li>
                    <li class="tag dep-tag" id="tag-31">投融资部</li>
                    <li class="tag dep-tag" id="tag-32">财务部</li>
                    <li class="tag dep-tag" id="tag-33">证券部</li>
                    <li class="tag dep-tag" id="tag-34">内审部</li>
                    <li class="tag dep-tag" id="tag-35">采购部</li>
                  </ul>
                </div>
              </div>
            </section>
          </div>
          <div class="col-lg-12">
            <section class="panel">
              <header class="panel-heading add-heading">
                组织架构
                <i class="add-icon icon-plus" onclick="location.href='./edit/edit-org.html'"> 新增</i>
              </header>
              <div class="panel-body">
                <div id="proContainer" class="dlshouwen-grid-container"></div>
                <div id="proToolBarContainer" class="dlshouwen-grid-toolbar-container"></div>
              </div>
            </section>
            <!-- modal start-->
            <div class="modal fade searchpanel" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <section class="panel">
                    <div class="panel-heading">
                      详细信息
                      <i class="add-icon icon-remove" data-dismiss="modal" aria-hidden="true"></i>
                    </div>
                    <div class="panel-body">

                    </div>
                    <p class="default-buttons">
                      <a href="javascript:void(0);" class="button-next btn btn-danger btn-nbora" data-dismiss="modal" aria-hidden="true">关闭</a>
                    </p>
                    <div class="panel-bg"></div>
                  </section>
                </div>
                <!-- /.modal-content -->
              </div>
            </div>
            <!-- modal end -->
          </div>
        </div>
      </section>
    </section>
    <!--main content end-->
  </section>
  <!-- js placed at the end of the document so the pages load faster -->
  <script src="../js/jquery.js"></script>
  <script src="../js/jquery-1.8.3.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <script src="../js/jquery.scrollTo.min.js"></script>
  <script src="../js/jquery.nicescroll.js" type="text/javascript"></script>
  <script src="../js/jquery.sparkline.js" type="text/javascript"></script>
  <script src="../assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
  <script src="../js/owl.carousel.js"></script>
  <script src="../js/jquery.customSelect.min.js"></script>

  <!--common script for all pages-->
  <script src="../js/common-scripts.js"></script>

  <!--script for this page-->
  <script src="../js/sparkline-chart.js"></script>
  <script src="../js/easy-pie-chart.js"></script>

  <!-- 外部公共js文件引入 -->
  <script src="../js/layout.js"></script>
  <!-- layer组件 -->
  <script src="../assets/layer/layer.js"></script>
  <!-- 表格组件 -->
  <script type="text/javascript" src="../assets/table/dlshouwen.grid.js"></script>
  <script type="text/javascript" src="../assets/table/i18n/zh-cn.js"></script>
  <script type="text/javascript" src="../assets/table/dependents/datePicker/WdatePicker.js" defer="defer"></script>

  <!-- 流程图绘制组件 -->
  <script type="text/javascript" src="../assets/joint/lodash.min.js"></script>
  <script type="text/javascript" src="../assets/joint/backbone-min.js"></script>
  <script type="text/javascript" src="../assets/joint/joint.min.js"></script>

  <script>
    //流程图绘制
    function tgraph() {
      var graph = new joint.dia.Graph();

      var ElementView = joint.dia.ElementView.extend({
        pointerdown: function () {
          this._click = true;
          joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
        },
        pointermove: function (evt, x, y) {
          this._click = false;
          joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
        },
        pointerup: function (evt, x, y) {
          if (this._click) {
            // triggers an event on the paper and the element itself
            this.notify('cell:click', evt, x, y);
          } else {
            joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
          }
        }
      });
      var LinkView = joint.dia.LinkView.extend({
        addVertex: function (evt, x, y) {},
        removeVertex: function (endType) {},
        pointerdown: function (evt, x, y) {}
      });

      //定义画布
      var paper = new joint.dia.Paper({
        el: $('#paper'),
        width: 1050,
        height: 1050,
        gridSize: 0,
        model: graph,
        elementView: ElementView,
        linkView: LinkView,
      });

      //paper.$el.css('pointer-events', 'none')//去除默认样式，使所有事件不可用

      //定义形状
      var state = function (x, y, shape, background, text) {
        var cell;
        if (shape === "rect") {
          cell = new joint.shapes.basic.Rect({
            position: {
              x: x,
              y: y
            }, //坐标
            size: {
              width: 100,
              height: 60
            }, //宽高
            attrs: {
              rect: {
                fill: {
                  type: 'linearGradient',
                  stops: [{
                      offset: '0%',
                      color: background
                    }, //渐变开始
                    {
                      offset: '100%',
                      color: background
                    } //渐变结束
                  ],
                  attrs: {
                    x1: '0%',
                    y1: '0%',
                    x2: '0%',
                    y2: '100%'
                  }
                },
                stroke: '#e0e0e0', //边框颜色
                'stroke-width': 5 //边框大小
              },
              text: {
                'font-weight': 100,
                'font-size': 12,
                fill: '#ede7cf',
                text: text,
              } //显示文字
            }
          });
        }
        if (shape === "txt") {
          cell = new joint.shapes.basic.Rect({
            position: {
              x: x,
              y: y
            }, //坐标
            size: {
              width: 40,
              height: 160
            }, //宽高
            attrs: {
              rect: {
                fill: {
                  type: 'linearGradient',
                  stops: [{
                      offset: '0%',
                      color: background
                    }, //渐变开始
                    {
                      offset: '100%',
                      color: background
                    } //渐变结束
                  ],
                  attrs: {
                    x1: '0%',
                    y1: '0%',
                    x2: '0%',
                    y2: '100%'
                  }
                },
                stroke: '#e0e0e0', //边框颜色
                'stroke-width': 5 //边框大小
              },
              text: {
                'font-weight': 100,
                'font-size': 12,
                fill: '#ede7cf',
                text: text,
              } //显示文字
            }
          });
        } else if (shape === "ellipse") {
          cell = new joint.shapes.basic.Ellipse({
            position: {
              x: x,
              y: y
            }, //坐标
            size: {
              width: 100,
              height: 60
            }, //宽高
            attrs: {
              ellipse: {
                fill: {
                  type: 'linearGradient',
                  stops: [{
                      offset: '0%',
                      color: background
                    }, //渐变开始
                    {
                      offset: '100%',
                      color: background
                    } //渐变结束
                  ],
                  attrs: {
                    x1: '0%',
                    y1: '0%',
                    x2: '0%',
                    y2: '100%'
                  }
                },
                stroke: '#e0e0e0', //边框颜色
                'stroke-width': 5 //边框大小
              },
              text: {
                'font-weight': 100,
                'font-size': 12,
                fill: '#ede7cf',
                text: text
              } //显示文字
            }
          });
        }
        graph.addCell(cell);
        return cell;
      };

      //定义连线
      function link(source, target, label) {
        var cell = new joint.dia.Link({
          source: {
            id: source.id
          },
          target: {
            id: target.id
          },
          labels: [{
            position: 0.5,
            attrs: {
              text: {
                text: label || '',
                'font-size': 12,
                'font-weight': 'bold'
              }
            }
          }],
          router: {
            name: 'manhattan'
          }, //设置连线弯曲样式 manhattan直角

          toolMarkup: '<g></g>', // 去掉tool，包括红色x
          arrowheadMarkup: "<g></g>", //去掉两头的箭头

          attrs: {
            '.connection': {
              stroke: '#999', //连线颜色
              'stroke-width': 2 //连线粗细
            },
            '.marker-target': {
              fill: '#999', //箭头颜色
              'stroke-width': 0, //边框大小
              d: 'M 10 0 L 0 5 L 10 10 z' //箭头样式
            }
          }
        });
        graph.addCell(cell);
        return cell;
      }

      //创建元素
      var start = state(450, 10, "rect", "#4f6d7d", "股东大会");
      var state1 = state(450, 160, "rect", "#4f6d7d", "董事会/董事长");
      var state2 = state(260, 160, "ellipse", "#4f6d7d", "董事会秘书");
      var state3 = state(780, 70, "rect", "#4f6d7d", "浩方信息");
      var state4 = state(780, 160, "rect", "#4f6d7d", "浩方科技");
      var state5 = state(780, 240, "rect", "#4f6d7d", "美国赛特斯");
      var state6 = state(450, 290, "ellipse", "#4f6d7d", "总经理");
      var state7 = state(380, 390, "rect", "#4f6d7d", "总经办");

      var state8 = state(450, 490, "ellipse", "#4f6d7d", "首席运营官");
      var state9 = state(700, 490, "ellipse", "#4f6d7d", joint.util.breakText("董事长助理兼执行副总裁", {
        width: 80
      }));

      var state10 = state(520, 590, "ellipse", "#4f6d7d", "副总经理");
      var state11 = state(345, 690, "ellipse", "#4f6d7d", joint.util.breakText("产品管理部总经理", {
        width: 80
      }));
      var state12 = state(592, 690, "ellipse", "#4f6d7d", joint.util.breakText("人力行政高级总监", {
        width: 80
      }));
      var state13 = state(450, 690, "ellipse", "#4f6d7d", "销售部总经理");

      var state14 = state(0, 870, "txt", "#4f6d7d", joint.util.breakText("柔性融合运维平台研发部", {
        width: 20
      }));
      var state15 = state(50, 870, "txt", "#4f6d7d", joint.util.breakText("柔性基础网络研发部", {
        width: 20
      }));
      var state16 = state(100, 870, "txt", "#4f6d7d", joint.util.breakText("柔性云及大数据研发部", {
        width: 20
      }));
      var state17 = state(150, 870, "txt", "#4f6d7d", joint.util.breakText("柔性边缘计算研发部", {
        width: 20
      }));
      var state18 = state(200, 870, "txt", "#4f6d7d", joint.util.breakText("运营管理部", {
        width: 20
      }));
      var state19 = state(250, 870, "txt", "#4f6d7d", joint.util.breakText("先进技术及产品研究院", {
        width: 20
      }));
      var state20 = state(300, 870, "txt", "#4f6d7d", joint.util.breakText("市场部", {
        width: 20
      }));
      var state21 = state(350, 870, "txt", "#4f6d7d", joint.util.breakText("信息系统集成部", {
        width: 20
      }));
      var state22 = state(400, 870, "txt", "#4f6d7d", joint.util.breakText("产品管理部", {
        width: 20
      }));
      var state23 = state(450, 870, "txt", "#4f6d7d", joint.util.breakText("运营商销售部", {
        width: 20
      }));
      var state24 = state(500, 870, "txt", "#4f6d7d", joint.util.breakText("广电销售部", {
        width: 20
      }));
      var state25 = state(550, 870, "txt", "#4f6d7d", joint.util.breakText("政企销售部", {
        width: 20
      }));
      var state26 = state(600, 870, "txt", "#4f6d7d", joint.util.breakText("IT信息中心", {
        width: 20
      }));
      var state27 = state(650, 870, "txt", "#4f6d7d", joint.util.breakText("政府事务部", {
        width: 20
      }));
      var state28 = state(700, 870, "txt", "#4f6d7d", joint.util.breakText("综合事务管理部", {
        width: 20
      }));
      var state29 = state(750, 870, "txt", "#4f6d7d", joint.util.breakText("人力资源部", {
        width: 20
      }));
      var state30 = state(800, 870, "txt", "#4f6d7d", joint.util.breakText("投融资部", {
        width: 20
      }));
      var state31 = state(850, 870, "txt", "#4f6d7d", joint.util.breakText("财务部", {
        width: 20
      }));
      var state32 = state(900, 870, "txt", "#4f6d7d", joint.util.breakText("证券部", {
        width: 20
      }));
      var state33 = state(950, 870, "txt", "#4f6d7d", joint.util.breakText("内审部", {
        width: 20
      }));
      var state34 = state(1000, 870, "txt", "#4f6d7d", joint.util.breakText("采购部", {
        width: 20
      }));

      //创建连线
      link(start, state1, "");
      link(state1, state2, "");
      link(state1, state3, "");
      link(state1, state4, "");
      link(state1, state5, "");
      link(state1, state6, "");
      link(state1, state9, "");
      // 总经理
      link(state6, state7, "");
      link(state6, state8, "");
      link(state6, state34, "");
      link(state6, state12, "");

      // 首席运营官
      link(state8, state10, "");
      link(state8, state11, "");
      link(state8, state13, "");
      link(state8, state14, "");
      link(state8, state15, "");
      link(state8, state16, "");
      link(state8, state17, "");
      link(state8, state18, "");
      link(state8, state19, "");
      link(state8, state20, "");
      link(state8, state21, "");

      // 副总经理
      link(state10, state25, "");

      // 产品管理部总经理
      link(state11, state22, "");

      // 销售部总经理
      link(state13, state23, "");
      link(state13, state24, "");

      // 人力行政高级总监
      link(state12, state26, "");
      link(state12, state27, "");
      link(state12, state28, "");
      link(state12, state29, "");

      // 董事长助理兼执行副总裁
      link(state9, state30, "");
      link(state9, state31, "");
      link(state9, state32, "");
      link(state9, state33, "");

      //给所有元素添加点击事件
      paper.on('cell:click', function (e) {
        $("#detailModal .modal-body").html("");
        var arr = $("#" + e.id + " tspan");
        var list = [e.id, arr.text()];
        var claname = $("#" + e.id).attr('class');
        if (claname.search("Rect") != -1) {
          list.push("部门");
        } else {
          list.push("个人");
        }
        console.log(list);
        if (arr.length === 1) {
          $("#detailModal .modal-body").append($(arr).html());
          $("#detailModal").modal();
        } else {
          var tmp = "";
          $.each(arr, function (k, v) {
            tmp += $(v).html();
          });
          $("#detailModal .modal-body").append(tmp);
          $("#detailModal").modal();
        }
      });
    };
    tgraph();
  </script>

  <script type="text/javascript" src="../assets/jsPlumb/jsPlumb-2.2.8-min.js"></script>
  <script type="text/javascript">
    jsPlumb.ready(function () {
      var color = "#999";
      var instance = jsPlumb.getInstance({
        Connector: ["Straight", {
          curviness: 50
        }],
        DragOptions: {
          cursor: "pointer",
          zIndex: 99
        },
        // isSource: false,
        PaintStyle: {
          stroke: color,
          strokeWidth: 2
        },
        EndpointStyle: {
          radius: 2,
          fill: color
        },
        HoverPaintStyle: {
          stroke: "#ec9f2e"
        },
        EndpointHoverStyle: {
          fill: "#ec9f2e"
        },
        Container: "canvas"
      });
      instance.batch(function () {
        var arrowCommon = {
            foldback: 0.7,
            fill: color,
            width: 8
          },
          overlays = [
            ["Arrow", {
              location: 0.7
            }, arrowCommon],
            // ["Arrow", {
            //   location: 0.3,
            //   direction: -1
            // }, arrowCommon]
          ];
        var windows = jsPlumb.getSelector(".tag");
        for (var i = 0; i < windows.length; i++) {
          instance.addEndpoint(windows[i], {
            uuid: windows[i].getAttribute("id") + "-bottom",
            anchor: "Bottom",
            maxConnections: -1
          });
          instance.addEndpoint(windows[i], {
            uuid: windows[i].getAttribute("id") + "-top",
            anchor: "Top",
            maxConnections: -1
          });
        }
        debugger;
        var conn =
        instance.connect({uuids: ["tag-1-bottom", "tag-2-top"],overlays: overlays});
        instance.connect({uuids: ["tag-2-bottom", "tag-3-top"],overlays: overlays});
        instance.connect({uuids: ["tag-2-bottom", "tag-4-top"],overlays: overlays});
        instance.connect({uuids: ["tag-2-bottom", "tag-5-top"],overlays: overlays});
        instance.connect({uuids: ["tag-2-bottom", "tag-6-top"],overlays: overlays});
        instance.connect({uuids: ["tag-2-bottom", "tag-7-top"],overlays: overlays});
        instance.connect({uuids: ["tag-7-bottom", "tag-8-top"],overlays: overlays});
        instance.connect({uuids: ["tag-8-bottom", "tag-9-top"],overlays: overlays});
        instance.connect({uuids: ["tag-2-bottom", "tag-10-top"],overlays: overlays});
        instance.connect({uuids: ["tag-9-bottom", "tag-11-top"],overlays: overlays});
        instance.connect({uuids: ["tag-11-bottom", "tag-13-top"],overlays: overlays});
        instance.connect({uuids: ["tag-9-bottom", "tag-12-top"],overlays: overlays});
        instance.connect({uuids: ["tag-7-bottom", "tag-14-top"],overlays: overlays});
        instance.connect({uuids: ["tag-10-bottom", "tag-31-top"],overlays: overlays});
        instance.connect({uuids: ["tag-10-bottom", "tag-32-top"],overlays: overlays});
        instance.connect({uuids: ["tag-10-bottom", "tag-33-top"],overlays: overlays});
        instance.connect({uuids: ["tag-10-bottom", "tag-34-top"],overlays: overlays});
        instance.connect({uuids: ["tag-7-bottom", "tag-35-top"],overlays: overlays});
        instance.connect({uuids: ["tag-14-bottom", "tag-27-top"],overlays: overlays});
        instance.connect({uuids: ["tag-14-bottom", "tag-28-top"],overlays: overlays});
        instance.connect({uuids: ["tag-14-bottom", "tag-29-top"],overlays: overlays});
        instance.connect({uuids: ["tag-14-bottom", "tag-30-top"],overlays: overlays});
        instance.connect({uuids: ["tag-11-bottom", "tag-26-top"],overlays: overlays});
        instance.connect({uuids: ["tag-13-bottom", "tag-24-top"],overlays: overlays});
        instance.connect({uuids: ["tag-13-bottom", "tag-25-top"],overlays: overlays});
        instance.connect({uuids: ["tag-12-bottom", "tag-23-top"],overlays: overlays});
        instance.connect({uuids: ["tag-13-bottom", "tag-25-top"],overlays: overlays});
        instance.connect({uuids: ["tag-9-bottom", "tag-15-top"],overlays: overlays});
        instance.connect({uuids: ["tag-9-bottom", "tag-16-top"],overlays: overlays});
        instance.connect({uuids: ["tag-9-bottom", "tag-17-top"],overlays: overlays});
        instance.connect({uuids: ["tag-9-bottom", "tag-18-top"],overlays: overlays});
        instance.connect({uuids: ["tag-9-bottom", "tag-19-top"],overlays: overlays});
        instance.connect({uuids: ["tag-9-bottom", "tag-20-top"],overlays: overlays});
        instance.connect({uuids: ["tag-9-bottom", "tag-21-top"],overlays: overlays});
        instance.connect({uuids: ["tag-9-bottom", "tag-22-top"],overlays: overlays});
        instance.draggable(windows);
      });
      jsPlumb.fire("jsPlumbDemoLoaded", instance);
    });
  </script>
  <script type="text/javascript">
    $('.tag').on('click',function(){
      // 名称
      var list = [];
      var txt = $(this).html().trim();
      var tid = $(this).attr('id');
      list.push(tid);
      list.push(txt);
      // 类型
      var claname = $(this).attr('class');
      if (claname.search("dep-tag") != -1) {
        list.push("部门");
      } else {
        list.push("个人");
      }
      console.log(list);
      $("#detailModal").modal();
    });
  </script>
  <!-- 当前页面js文件引入 -->
  <script src="../js/office/index.js"></script>

</body>

</html>